<template>
  <div class="header-wrapper">
    <div class="left-content">
      <div class="navigation-menu">
        <div class="menu-item" v-for="(m, index) in topMenuList" :key="index" v-show="!m.backdoor"
             :class="{'menu-selected': selected === m.routerName}" @click="goto(m)">
          <div class="menu-icon">
            <i :class="m.icon"></i>
          </div>
          <div class="menu-text">{{ m.label }}</div>
        </div>
        <div class="menu-item" :class="{'menu-selected': selected === 'backdoor'}" v-if="isBackdoor"
             @click="goto({routerName: 'backdoor'})">
          <div class="menu-icon">
            <i class="el-icon-s-tools"></i>
          </div>
          <div class="menu-text">研发人员专用</div>
        </div>
      </div>
    </div>
    <div class="right-content">
      <!--      <div class="search">-->
      <!--        <el-tooltip class="item" effect="dark" content="搜索" placement="bottom">-->
      <!--          <i class="el-icon-search"></i>-->
      <!--        </el-tooltip>-->
      <!--      </div>-->
      <!--      <div class="skin">-->
      <!--        <el-tooltip class="item" effect="dark" content="设置主题" placement="bottom">-->
      <!--          <i class="el-icon-edit"></i>-->
      <!--        </el-tooltip>-->
      <!--      </div>-->
      <!--      <div class="font">-->
      <!--        <el-tooltip class="item" effect="dark" content="设置字体" placement="bottom">-->
      <!--          <i class="el-icon-picture"></i>-->
      <!--        </el-tooltip>-->
      <!--      </div>-->
      <div class="menu-header-user">
        <header-user></header-user>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import HeaderUser from './header-user'
  import {mapState} from 'vuex'

  export default {
    name: 'd-header',
    components: {
      HeaderUser
    },
    data() {
      return {
        selected: '',
        isIcon: true
      }
    },
    watch: {
      $route(to, from) {
        this.init()
      }
    },
    mounted() {
      this.init()
    },
    methods: {
      goto(params) {
        this.selected = params.routerName
        this.$router.push({name: params.routerName})
        this.$store.commit('initLeftMenuList', params.routerName)
      },
      init() {
        //获取当前路由名称，确保刷新后顶部菜单栏的选中状态
        this.selected = this.$route.matched[0].name
        this.$store.commit('initLeftMenuList', this.selected)
      }
    },
    computed: {
      ...mapState({
        userInfo: state => {
          return state.current.currentUser
        },
        topMenuList: state => {
          return state.menu.topMenuList
        }
      }),
      isBackdoor() { //后门菜单
        return false
      }
    }
  }
</script>

<style lang="stylus" type="text/stylus" scoped>
  @import "../../../common/css/mixin.styl"
  .header-wrapper
    background-color #252a2f
    height 50px
    displayFlex()

    .left-content
      flex (4)
      displayFlex()

      .open-button
        displayFlex()
        displayVerticalCenter(center)
        cursor pointer
        padding-right 20px
        color #d9d9d9

        &:hover
          color #00b0d4

        .button-icon
          font-size 25px
          line-height 50px
          margin-left 18px

      .navigation-menu
        displayFlex()

        .menu-item
          color #d9d9d9
          text-align center
          height 50px
          line-height 50px
          padding 0 20px
          font-size 14px
          cursor pointer
          user-select none
          animation slide-down .5s ease-in
          -webkit-animation slide-down .5s ease-in

          &:hover
            color #00b0d4
            background-color rgba(0, 0, 0, .25)
          displayFlex()

          .menu-icon
            margin-right 5px

          .menu-text
            padding 0 0 0 5px

          .arrow
            flex(1)
            text-align right !important

          &.menu-selected
            color #00b0d4
            background-color rgba(0, 0, 0, .25)

    .right-content
      flex (1)
      margin-right 18px
      color #d9d9d9
      font-size 16px
      cursor pointer
      displayFlex()

      .search
        flex (1)
        text-align center

      .skin
        flex (1)
        text-align center

      .font
        flex (1)
        text-align center

      .menu-header-user
        flex (5)
        text-align center
</style>
